<template>
  <view>
    <navbar
      title-text=""
      :isHeight="false"
      :isWhite="true"
      background="none"
      @navBarAttached="onNavBarAttached"
    />
    <view style="position: relative">
      <image
        :src="hospital.avatar_url"
        mode="aspectFill"
        style="
          filter: blur(50rpx) brightness(0.8);
          display: block;
          width: 100%;
          height: 550rpx;
          overflow: hidden;
        "
      ></image>
      <view
        :style="
          'position:absolute;top:' +
          navHeight +
          'rpx;padding-top:65rpx;overflow:hidden;width:100%;'
        "
      >
        <!-- 医院详情 -->
        <view class="hospital-hd">
          <view
            class="weui-cell weui-cell_access"
            hover-class="weui-cell_active"
            @tap="showShareModal"
          >
            <view class="weui-cell__hd">
              <image
                :src="hospital.avatar_url"
                mode="aspectFill"
                style="
                  position: absolute;
                  top: -65rpx;
                  display: block;
                  width: 150rpx;
                  height: 135rpx;
                  border-radius: 10rpx;
                  overflow: hidden;
                "
              ></image>
            </view>

            <view class="weui-cell__bd" style="padding-left: 170rpx">
              <view style="position: absolute; top: -65rpx">
                <text
                  style="font-size: 36rpx; color: #ffffff; font-weight: bold"
                  >{{ hospital.name }}</text
                >
              </view>
              <view>
                <text class="hosp-rank">{{ hospital.rank }}</text>
                <text class="hosp-label">{{ hospital.label }}</text>
              </view>
            </view>
            <view class="weui-cell__ft weui-cell__ft_in-access"
              ><text class="f4">转发</text></view
            >
          </view>
          <view
            class="weui-cell weui-cell_access"
            hover-class="weui-cell_active"
            @tap="toMap"
          >
            <view class="weui-cell__hd">
              <image
                src="/static/resource/images/ic_address.png"
                mode="aspectFill"
                style="
                  margin-right: 10rpx;
                  display: block;
                  width: 40rpx;
                  height: 40rpx;
                "
              ></image>
            </view>
            <view class="weui-cell__bd">
              <view>
                <text style="font-size: 24rpx"
                  >{{ hospital.city }}{{ hospital.district
                  }}{{ hospital.address }}</text
                >
              </view>
            </view>
            <view class="weui-cell__ft weui-cell__ft_in-access"
              ><text class="f4">导航</text></view
            >
          </view>
        </view>
        <!-- 预约列表 -->
        <view class="hospital-bd">
          <view class="weui-cells serv-list">
            <view class="weui-cell serv-item">
              <view class="weui-cell__bd">
                <view style="padding-top: 10rpx"
                  ><text class="serv-name">在线预约您需要的服务</text></view
                >
              </view>
              <view class="weui-cell__ft"></view>
            </view>
            <view
              class="weui-cell serv-item"
              @tap="toService(item)"
              :data-svid="item.id"
              v-for="(item, index) in services"
              :key="index"
            >
              <block v-if="item.use_switch == 1">
                <view class="weui-cell__hd">
                  <image
                    class="serv-logo"
                    :src="
                      item.logo_image
                        ? item.logo_image_url
                        : '../../resource/images/avatar.jpg'
                    "
                    mode="aspectFill"
                  />
                </view>

                <view class="weui-cell__bd">
                  <view>
                    <text class="serv-name">{{ item.name }}</text>
                  </view>
                  <view class="serv-line serv-intro">{{ item.intro }}</view>
                  <view class="serv-line">
                    <text class="serv-price">{{ item.price }}</text>
                    <text class="serv-unit">元/次</text>
                  </view>
                </view>

                <view class="weui-cell__ft">
                  <button class="btn1m">预约</button>
                </view>
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 分享弹窗 -->
    <share :shareModal="clone_shareModal"></share>
  </view>
</template>

<script setup>
import navbar from '../../compontents/navbar/navbar'
import share from '../../compontents/share/share'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const hospital = ref({})
const app = getApp()
// 获取医院详情
const getHospitalData = hid => {
  app.globalData.utils.request({
    url: '/Hospital/index',
    methth: 'GET',
    data: {
      hid
    },
    success (res) {
      console.log('获取医院详情成功', res)
      hospital.value = res.data.data.hospital
      services.value = res.data.data.services
    },
    fail: res => {
      console.log('获取医院详情失败', res)
    }
  })
}
onLoad(options => {
  getHospitalData(options.hid)
})
const navHeight = ref('')
// 自定义事件
const onNavBarAttached = data => {
  navHeight.value = data.navHeight
}
// 转发弹窗
const clone_shareModal = ref(false)
const showShareModal = () => {
  clone_shareModal.value = true
}
// 导航
const toMap = () => {
  const point = bMapTransQQMap(hospital.value.lng, hospital.value.lat)
  const key = 'KYTBZ-PMOLN-VILF5-SPBCA-SAYDT-66BPX'
  const referer = app.globalData.name
  const endPoint = JSON.stringify({
    name: hospital.value.name,
    latitude: point.lat,
    longitude: point.lat
  })
  uni.navigateTo({
    url:
      'plugin://routePlan/index?key=' +
      key +
      '&referer=' +
      referer +
      '$endPoint' +
      endPoint +
      '&navigation=1'
  })
}
// 地图
const bMapTransQQMap = (lng, lat) => {
  let x_pi = (3.141592653589793 * 3000) / 180
  let x = lng - 0.0065
  let y = lat - 0.006
  let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
  let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
  let lngs = z * Math.cos(theta)
  let lats = z * Math.sin(theta)
  return { lng: lngs, lat: lats }
}
const services = ref([])
const toService = item => {
  uni.navigateTo({
    url: '/pages/service/index?svid=' + item.id + '&hid=' + hospital.value.id
  })
}
</script>

<style>
@import './index.css';
</style>
